<template>
  <v-row justify="center" style="background: white">
    <v-slide-x-reverse-transition>
      <v-alert
        :type="type"
        class="app-alert elevation-12"
        v-show="show"
        dense
        colored-border
        border="left"
        dismissible
      >
        <slot></slot>
      </v-alert>
    </v-slide-x-reverse-transition>
  </v-row>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";

@Component({})
export default class AppAlert extends Vue {
  // region Prop
  @Prop({ default: false }) value: boolean;

  @Prop({ default: 0 }) delay: number;
  @Prop({ default: "info" }) type: string;
  // endregion

  // region Data
  private show = false;
  // endregion

  // region computed
  // endregion

  // region watch
  @Watch("value", { immediate: true })
  onValueChange() {
    if (this.value) {
      this.show = this.value;
      if (this.delay > 0) {
        setTimeout(this.delayClose, this.delay);
      }
    }
  }

  @Watch("show", { immediate: true })
  onShowChange() {
    this.$emit("input", this.show);
  }
  // endregion

  // region method
  delayClose() {
    this.show = false;
  }
  // endregion

  // region hook
  // endregion
}
</script>

<style lang="scss">
.v-alert.app-alert {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 10;
}
</style>
